<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/codemirror.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/codemirror.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/mode/css/css.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/mode/javascript/javascript.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/mode/htmlmixed/htmlmixed.js"></script>


<script>
setTimeout(function(){
  var myTextArea = document.getElementById("block_input_css");
  var myCodeMirror = CodeMirror.fromTextArea(myTextArea);
  var myTextArea = document.getElementById("block_input_javascript");
  var myCodeMirror = CodeMirror.fromTextArea(myTextArea);
  var myTextArea = document.getElementById("block_input_html");
  var myCodeMirror = CodeMirror.fromTextArea(myTextArea);
  // var myCodeMirror = CodeMirror(function(elt) {
  //   myTextArea.parentNode.replaceChild(elt, myTextArea);
  // }, {
  //     value: myTextArea.value,
  //     mode:  "css"
  //   });
},1)

</script>

<style>
  .form-wrapper form{
    width:800px;
    max-width:100%;
    margin:auto;
    text-align:left !important;
    font-size:1.5em;
  }
  textarea{
    opacity:0;
  }
  pre{
    overflow:visible !important;
  }
  .CodeMirror{
    border:2px solid red;
    margin-top:10px;
    font-size:14px;
    padding:2px;
  }
</style>
<div class="form-wrapper">
  <%= form_for(@block) do |f| %>
    <% if @block.errors.any? %>
      <div id="error_explanation">
        <h2><%= pluralize(@block.errors.count, "error") %> prohibited this block from being saved:</h2>

        <ul>
        <% @block.errors.full_messages.each do |message| %>
          <li><%= message %></li>
        <% end %>
        </ul>
      </div>
    <% end %>
    <style>
      textarea{
        height:250px;
        width:600px;
        max-width:90%;
      }
    </style>
      <%= f.label :input_css %><br/>
      <%= f.text_area :input_css %><br/>
      <%= f.label :input_javascript %><br/>
      <%= f.text_area :input_javascript %><br/>
      <%= f.label :input_html %><br/>
      <%= f.text_area :input_html %><br/>
      <%= f.label :featured %><br/>
      <%= f.check_box :featured %><br/>
      <%= f.label :index_position %><br/>
      <%= f.text_field :index_position %><br/>
      <div class="actions">
        <%= f.submit %>
      </div>
  <% end %>
</div>
